<template>
	<view style="background-color: #F6F6F6;height: 800px;">
		<view class="backgroundImage">
			<u--image :showLoading="true" :src="src" width="100%" height="145px"></u--image>
		</view>
		<view class="commodity_introduction">
			<view class="" style="width: 70%;float: left;">
				<view class="commodity_introductionName" >
					<u--text size="16px" lines="1" bold text="香辣烤肉饭"></u--text>
				</view>
				<view class="commodity_received" >
					<u--text size="8px" color="#D9D9D9" lines="1" text="月售 44 好评率 100%"></u--text>
				</view>
				<view class="commodity_price" >
					<u--text size="14px" lines="1" bold text="¥20.96"></u--text>
				</view>
			</view>
			<view class="commodity_join" >
				<u-button type="primary" shape="circle" size="mini" text="+加入购物车" style="margin-top: 64px;"></u-button>
			</view>
		</view>
		<view class="commodity_details" >
			<view class="commodity_title" >
				<u-text size="14" lines="1" bold text="商品详情" ></u-text>
			</view>
			<view class="commodity_describe">
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="商品描述"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="精选东北大米蒸制而成的米饭,新鲜的鸡腿肉经过10小时以上腌制后在用小火烤制而成的烤肉,新鲜的圆白菜等主要食材精制而成!"></u-text>
				</view>
			</view>
			<view class="commodity_material" >
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="原料"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="鸡肉,辣椒,大米"></u-text>
				</view>
			</view>
			<view class="commodity_weight">
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="分量"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="600克"></u-text>
				</view>
			</view>
			<view class="commodity_meatAndVegetable">
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="荤素"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="荤菜"></u-text>
				</view>
			</view>
			<view class="commodity_process" >
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="制作方法"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="烤"></u-text>
				</view>
			</view>
			<view class="commodity_flavor">
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="口味"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="香辣"></u-text>
				</view>
			</view>
			<view class="commodity_coolAndHot">
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="凉热"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-text size="12" text="热"></u-text>
				</view>
			</view>
			<view class="commodity_price" >
				<view class="" style="width: 60px;float: left;">
					<u-text size="12" color="#C3C3C3" text="价格说明"></u-text>
				</view>
				<view class="" style="width: 83%;float: left;">
					<u-icon name="question-circle"></u-icon>
				</view>
			</view>
		</view>
		<view class="commodity_shopEvaluate">
			<view class="commodity_shopEvaluateTitle">
				<u-text size="14" bold text="商品评价"></u-text>
			</view>
			<view class="" style="width: 20%;float: left;padding-top: 13px;">
				<p style="font-size: 10px;">0条评价</p>
			</view>
		</view>
		<view class="commodity_payment">
			<view class="commodity_paymentContent">
				<view class="commodity_icon">
					<u--image :showLoading="true" :src="src1" width="35px" height="35px" style="padding-top: 8px;"></u--image>
				</view>
				<view class="commodity_moneyFrame">
					<u-text size="14" text="¥0" class="commodity_money" ></u-text>
				</view>
			</view>
			<view class="commodity_delivery">
				<u-button type="info" color="#989898" shape="circle"  text="¥20起送" style="margin-top: 5px;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src1:'/static/icon/6633e09a1dcbda078f23f54df858ca1.jpg',
				// 背景图片
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
			}
		},
		methods: {
	
		}
	}
</script>

<style scoped>
	.backgroundImage{
		width: 100%;
		height: 145px;
	}
	.commodity_introduction{
		width: 94%;
		height: 110px;
		background-color: white;
		margin: 0 auto;
	}
	.commodity_introductionName{
		width: 70%;
		height: 20px;
		margin-top: 20px;
		margin-left: 10px;
	}
	.commodity_received{
		width: 70%;
		height: 20px;
		margin-top: 6px;
		margin-left: 10px;
	}
	.commodity_price{
		width: 70%;
		height: 20px;
		margin-top: 6px;
		margin-left: 10px;
	}
	.commodity_join{
		width: 25%;
		height: 110px;
		float: left;
	}
	.commodity_details{
		width: 94%;
		height: 320px;
		background-color: white;
		margin: 0 auto;
		margin-top: 70px;
	}
	.commodity_title{
		padding-top: 10px;
		padding-left: 10px;
	}
	.commodity_describe{
		 width: 94%;
		 margin-top: 10px;
		 margin-left: 10px;
		 float: left;
	}
	.commodity_material{
		width: 94%;
		margin-left: 10px;
		padding-top: 14px;
		float: left;
	}
	.commodity_weight{
		width: 94%;
		margin-left: 10px;
		padding-top: 14px;
		float: left;
	}
	.commodity_meatAndVegetable{
		 width: 94%;
		 margin-left: 10px;
		 padding-top: 14px;
		 float: left;
	}
	.commodity_process{
		width: 94%;
		margin-left: 10px;
		padding-top: 14px;
		float: left;
	}
	.commodity_flavor{
		width: 94%;
		margin-left: 10px;
		padding-top: 14px;
		float: left;
	}
	.commodity_coolAndHot{
		width: 94%;
		margin-left: 10px;
		padding-top: 14px;
		float: left;
	}
	.commodity_price{
		width: 94%;
		margin-left: 10px;
		padding-top: 14px;
		float: left;
	}
	.commodity_shopEvaluate{
		width: 94%;
		margin: 0 auto;
		background-color: white;
		height: 100px;
		margin-top:10px;
	}
	.commodity_shopEvaluateTitle{
		 padding-top:10px;
		 margin-left: 10px;
		  width: 75%;
		  float: left;
	}
	.commodity_payment{
		width: 100%;
		height: 50px; 
		background-color: white;
		position: fixed;
		bottom:0;
	}
	.commodity_paymentContent{
		width: 80%;
		height: 100px;
		float: left;
	}
	.commodity_icon{
		height: 50px;
		float: left;
		margin-left: 10px;
	}
	.commodity_moneyFrame{
		height: 50px;
		float: left;
	}
	.commodity_money{
		padding-top:15px;
		margin-left: 10px;
	}
	.commodity_delivery{
		width: 20%;
		height: 50px;
		float: left;
	}
</style>